@use '../tp';

.#{tp.$prefix}-ckbv {
	&_l {
		display: block;
		position: relative;
	}
	&_i {
		@extend %tp-resetUserAgent;

		left: 0;
		opacity: 0;
		position: absolute;
		top: 0;
	}
	&_w {
		background-color: tp.cssVar('input-bg');
		border-radius: tp.cssVar('blade-border-radius');
		cursor: pointer;
		display: block;
		height: tp.cssVar('container-unit-size');
		position: relative;
		width: tp.cssVar('container-unit-size');

		svg {
			display: block;
			height: 16px;
			inset: 0;
			margin: auto;
			opacity: 0;
			position: absolute;
			width: 16px;

			path {
				fill: none;
				stroke: tp.cssVar('input-fg');
				stroke-width: 2;
			}
		}
	}
	&_i:hover + &_w {
		background-color: tp.cssVar('input-bg-hover');
	}
	&_i:focus + &_w {
		background-color: tp.cssVar('input-bg-focus');
	}
	&_i:active + &_w {
		background-color: tp.cssVar('input-bg-active');
	}
	&_i:checked + &_w svg {
		opacity: 1;
	}
	&.#{tp.$disabled} &_w {
		opacity: 0.5;
	}
}
